 /*
 * commision list
**/
<template>
<div v-if="lazy">
	<v-tab></v-tab>
	<div class="weui-cells mod-items" v-load-more="loaderMore">
		<div class="weui-search-bar" :class="{'weui-search-bar_focusing': focusing}" @click="focusin(true)">
			<a class="weui-search-back" v-show="keyword" @click.stop="searchBack"></a>
	        <div class="weui-search-bar__form">
	            <div class="weui-search-bar__box">
	                <i class="weui-icon-search"></i>
	                <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" v-model="keyword" @keyup.enter="search($event)">
	                <a href="javascript:" class="weui-icon-clear" id="searchClear" @click.stop="focusin(false)"></a>
	            </div>
	            <label class="weui-search-bar__label" id="searchText">
	                <i class="weui-icon-search"></i>
	                <span>搜索</span>
	            </label>
	        </div>
	        <a class="weui-search-bar__cancel-btn" @click.stop="search($event)">搜索</a>
	    </div>
	  <!--<div class="weui-cell tc tab-box">
	  	<div class="weui-cell__bd" :class="{'active': order === 2}" @click="tab(2)">新品优先</div>
	  	<div class="weui-cell__bd" :class="{'active': order === 1}" @click="tab(1)">综合排序</div>
	  	<div class="weui-cell__bd">综合排序</div>
	  </div>-->
	  <div class="game-box" v-show="!dataEmpty">
	    <div class="weui-cell" v-for="(item, index) in dataList" @click="infopage(item)" :class="{'fixed':step === 5 && index === 1 }">
	      <div class="weui-cell__hd def-icon">
	        <img :src="item.imgThum" alt="" class="logo"/>
	      </div>
	      <div class="weui-cell__bd">
	        <p class="cell__bd-tit ellipsis">{{item.title}}</p>
	        <p class="cell__bd-tip"><span v-if="item.postFree == 1">包邮</span><span v-if="item.couponAmount != 0">券{{item.couponAmount}}</span><span v-if="isnew(item.createTime)">今日上新</span></p>
	        <p class="cell__bd-prize">
	        	<span class="pbox-n">￥<span class="prize">{{item.price}}</span></span>
	        	<span class="pbox-o">￥<span class="prize">{{item.priceOri}}</span></span>
	        </p>
	        <p class="cell__bd-dsc">成单交易返还{{item.fanliScore}}积分</p>
	      </div>
	      <div class="weui-cell__ft reset-ft">
	        <a class="btn" @click.stop="shareWin(item)"></a>
	      </div>
	    </div>
	      <!--more-->
	      <div class="weui-loadmore" v-if="showLoading">
		    <i class="weui-loading"></i>
		    <span class="weui-loadmore__tips">正在加载</span>
		  </div>
		  <div class="weui-loadmore weui-loadmore_line" v-if="touchend">
		      <span class="weui-loadmore__tips">期待上新</span>
		  </div>
	  </div>
	  <div class="game-box tc" v-show="dataEmpty">
	  	<div class="nofond"></div>
	  	<a class="seeo" @click="searchBack">看看别的吧！</a>
	  </div>
	</div>
	<poster ref="poster"></poster>
	
	<div v-if="inGetData">
	    <div class="weui-mask_transparent"></div>
	    <div class="weui-toast" style="margin-top:3.8em; background:rgba(17, 17, 17, 0.5)">
	        <i class="weui-loading weui-icon_toast"></i>
	        <p class="weui-toast__content">数据加载中</p>
	    </div>
	</div>
	
	<div class="guide-layer" v-if="step > 4 && step < 7">
		<div class="guide-font font1" v-show="step === 5">
			<p>5、点击<i class="share"></i><span>分享该商品</span></p>
			<p>好友购买商品，你可获得<span>相应积分</span></p>
			<div class="arrow"></div>
		</div>
		<div class="guide-font font2" v-show="step === 6">
			<p>6、点击这里领取生活常用</p>
			<p><span>优惠券、9.9包邮购</span></p>
			<div class="guide-tab"></div>
			<div class="arrow"></div>
			<div class="nextguide" @click="nextguide" style="top: -0.8rem;" v-show="step === 6">下一步</div>
		</div>
		<a class="clayer" @click.stop="closelayer"></a>
		<div class="nextguide" @click="nextguide" v-show="step === 5">下一步</div>
	</div>
	
	<detail :gid="gid" @back="closeDetail" @share="shareWin" v-if="gid"></detail>
</div>
</template>
<script>
import {getFanliList, clickRecord, duringRecord} from 'src/service/getData'
import {loadMore} from 'src/config/mixin'
import {mapState} from 'vuex'
import detail from 'src/page/commision/detail'
import vTab from 'components/common/tab'
import poster from './poster'
export default {
  data () {
    return {
      inGetData: false, // loading
      touchend: false, // 没有更多数据
      showLoading: true, // 显示加载动画
      preventRepeatReuqest: false, // 到达底部加载数据，防止重复加载
      currentPage: 0,
      pageSize: 20,
      order: 1, // 数据列表类型
      dataList: [], // 数据
      step: 99, // 引导步骤
      vDate: +new Date(),
      gid: '', // 详情组建使用id
      lazy: false, // 延时渲染
      focusing: false, // 搜索框状态
      keyword: '', // 检索关键词
      dataEmpty: false // 没有检索到数据
    }
  },
  mixins: [loadMore],
  components: {
    'v-tab': vTab,
    poster,
    detail
  },
  computed: {
    ...mapState([
      'I9RIA', 'location'
    ])
  },
  mounted () {
    if (this.location) {
      this.initData()
    }
    document.body.addEventListener('touchmove', (e) => {
      if (this.step > 4 && this.step < 7) e.preventDefault()
    }, !1)
    setTimeout(() => {
      this.lazy = true
    }, 100)
  },
  deactivated () { // commision是缓存页面，通过这个钩子关闭生成的二维码，记录浏览时间
    this.$refs.poster.dialogClose()
    let longtime = (+new Date()) - this.vDate
    duringRecord('commision', 'index', longtime)
  },
  methods: {
    shareWin (item, isDetail) {
      isDetail ? clickRecord('commision', 'shareDetail') : clickRecord('commision', 'share')
      this.$refs.poster.shareWin(item)
    },
    initData () {
      this.inGetData = true
      this.getFanliList()
      this.guidefn()
    },
    guidefn () { // 显示引导判断
      if (window.localStorage.guideStepx) {
        this.step = parseInt(window.localStorage.guideStepx)
      } else {
        window.localStorage.isguided = 1
      }
    },
    tab (order) {
      this.inGetData = true
      this.order = order
      this.currentPage = 0
      this.touchend = false
      this.getFanliList()
    },
    async getFanliList (more) {
      // load
      this.preventRepeatReuqest = true
      this.showLoading = true
      this.dataEmpty = false
      // fetch
      let tmpData = await getFanliList(this.currentPage, this.keyword, this.order, this.pageSize)
      if (tmpData.code !== 0) return
      let dataList = tmpData.data.rows
      if (more) {
        this.dataList = [...this.dataList, ...dataList]
      } else {
        this.dataList = dataList
        if (dataList.length === 0) this.dataEmpty = true
      }
      this.inGetData = false
      this.showLoading = false
      // 最后一页
      if (dataList.length < this.pageSize) {
        this.touchend = true
      }
      setTimeout(() => {
        this.preventRepeatReuqest = false
      }, 300)
    },
    loaderMore () {
      // 最后一页不再加载 || 防止重复请求
      if (this.touchend || this.preventRepeatReuqest) {
        return
      }
      this.currentPage++
      this.getFanliList(true)
    },
    infopage (elem) {
      clickRecord('commision', 'detail')
      this.gid = elem.id
      // this.$router.push('/comminfo?gid=' + elem.id)
    },
    closeDetail () {
      this.gid = ''
      this.$refs.poster.dialogClose()
    },
    isnew (time) {
      let _time = new Date(time * 1)
      _time.setDate(_time.getDate() + 1)
      let _timeN = new Date()
      return _time.getDate() === _timeN.getDate() && this.order === 2
    },
    closelayer () {
      this.step = 99
      window.localStorage.guideStepx = 99
    },
    nextguide () {
      this.step ++
      if (this.step === 7) {
        window.localStorage.guideStepx = 99
        this.$router.push('/index')
      }
    },
    focusin (bln) {
      this.focusing = bln
      if (!bln) {
        this.keyword = ''
        return
      }
      document.getElementById('searchInput').focus()
    },
    search (e) {
      this.focusing = this.keyword !== ''
      this.currentPage = 0
      this.touchend = false
      this.getFanliList()
      e && e.target.blur()
    },
    searchBack () {
      this.keyword = ''
      this.search()
    }
  },
  watch: {
    location (val) {
      if (val) {
        this.initData()
      }
    }
  }
}
</script>
<style scoped>
	.weui-cells.mod-items{margin:0rem !important;background:#efeff4;}
	.mod-items:after{border: none;}
	.tab-box{background: #fff;font-size: 0.14rem;padding: 0;line-height:0.44rem;}
	.tab-box .active{color:#ffa200;}
	.game-box{padding-bottom: 1rem;margin-top: 0.05rem;}
	.game-box .weui-cell{background:#fff;padding:0.1rem;-webkit-align-items:inherit;align-items:inherit;}
	.game-box .def-icon{width: 0.75rem; height: 0.75rem; overflow: hidden; margin-right: 0.1rem; border-radius: 8px;border: 1px solid #efefef;}
	.game-box .logo{width: 100%;}
	.game-box .cell__bd-tit{font-size:0.16rem; color: #333;width: 2.2rem !important;}
	.game-box .cell__bd-tip{font-size:0.09rem;color:#ff7e00;}
	.game-box .cell__bd-tip span{border: 1px solid #ff7e00; border-radius: 4px;padding: 0.02rem 0.08rem; margin-right: 0.05rem; line-height: 0.2rem;}
	.game-box .cell__bd-prize{margin:0;}
	.game-box .pbox-n{color:#ff6f6d;font-size:0.1rem;}
	.game-box .pbox-n .prize{font-size:0.16rem;}
	.game-box .pbox-o{color:#cfcfcf;font-size:0.08rem;text-decoration: line-through;}
	.game-box .pbox-o .prize{font-size:0.09rem;}
	.game-box .cell__bd-dsc{color: #666; font-size: 0.09rem;line-height: 0.1rem;}
	.game-box .btn,.share{width:.32rem; height:.32rem;background:url(../../assets/imgs/share.png) no-repeat; background-size:100%;position: absolute;bottom: 0.28rem; right: 0.2rem;}
	.game-box .nofond{background:url(../../assets/imgs/nofond.png) no-repeat;background-size:100%;height: 2rem;margin-top: 1rem;}
	.game-box .seeo{color: #fff; background: #ff602a; font-size: 0.14rem; border-radius: 22px; position: relative; top: 0.2rem; padding: 0.04rem 0.1rem;}
	
	.mod-items .game-box .reset-ft{width:0;}
	.weui-loadmore__tips{background: #efeff4;}
	.weui-search-bar__label,.weui-search-bar__form:after{border-radius: 22px;}
	.weui-search-bar__cancel-btn{color:#ffa200;font-size:0.14rem;}
	.weui-search-bar__input{color:#ffa200;}
	.weui-search-back{margin-left: 15px;margin-right: 10px;background:url(../../assets/imgs/back.png) center no-repeat; background-size:100%;padding:0 0.05rem;}
	
	.font1{top: 3.6rem;left: 0.4rem;}
	.font1 .arrow{transform: rotateX(180deg); bottom: 110%; top: auto;left: 60%;}
	.share{position: relative;display:inline-block;top:0.05rem; left: 0; margin: 0 0.1rem;}
	.font2{bottom: 1.4rem; left: 1.3rem;}
	.nextguide{top: 4.5rem;}
	.guide-tab{background:url(../../assets/imgs/step2.jpg) no-repeat; background-size:100%;width: 0.75rem; height: 2rem; top: 1.47rem; left: 0.7rem;position: absolute;}
</style>

